<template>
  <div class="watch-warp">
    <div class="watch-time-warp">
      {{ hour | fmtTime }}:{{ minutes | fmtTime }} <span class="watch-time-second">{{ seconds | fmtTime }}</span>
    </div>
    <div class="watch-date-warp">
      <div class="watch-human">
        <img src="../assets/human.gif" alt="">
      </div>
      <div class="watch-date-info">
        <div class="watch-info-row">{{ lnMonth }}{{ lnDay }}</div>
        <div class="watch-info-row">{{ week }} {{ month }}-{{ day }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import calendar from './calendar'
export default {
  name: 'SpaceWatch',
  filters: {
    fmtTime(value) {
      if (value <= 9) {
        return '0' + value
      }
      return value
    }
  },
  data() {
    return {
      lnMonth: '',
      lnDay: '',
      week: '',
      month: '',
      day: '',
      hour: 0,
      minutes: 0,
      seconds: 0
    }
  },
  created() {
    this.getDate()
    setInterval(() => {
      this.getDate()
    }, 1000)
  },
  methods: {
    getDate() {
      const now = new Date()
      this.month = now.getMonth() + 1
      this.day = now.getDate()
      this.hour = now.getHours()
      this.minutes = now.getMinutes()
      this.seconds = now.getSeconds()
      const lunar = calendar.solar2lunar(now.getFullYear(), this.month, this.day)
      this.lnMonth = lunar.IMonthCn
      this.lnDay = lunar.IDayCn
      this.week = lunar.ncWeek
    }
  }
}
</script>

<style scoped>
  @font-face{
    font-family:num;src:url(../assets/fonts/DS-DIGIT.TTF)
  }
  .watch-warp{
    display: block;
    width: 130px;
    height: 85px;
    background-color: #e0e6ef;
    border: 4px solid #444444;
    border-radius: 7px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .watch-human{
    height: 40px;
    width: 40px;
  }
  .watch-human img{
    display: block;
    height: 100%;
    margin: 0 auto;
  }
  .watch-time-warp{
    text-align: center;
    line-height: 30px;
    font-size: 28px;
    color: #3a3c3e;
    font-family: num;
    width: 91px;
    margin: 0 auto;
  }
  .watch-date-warp{
    position: relative;
    padding-right: 80px;
  }
  .watch-time-warp .watch-time-second{
    display: inline-block;
    font-size: 20px;
    width: 1em;
    text-align: left;
  }
  .watch-date-info{
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
  }
  .watch-info-row{
    line-height: 20px;
    font-size: 12px;
    color: #3a3c3e;
    font-weight: 500;
    text-align: center;
  }
</style>
